<!DOCTYPE HTML>

<html>
	<head>
		<link rel="shortcut icon" href="https://monkeyhbd.gitee.io/image/mokey-land.png">
		<!-- Welcome to visit monkeyhbd.gitee.io. -->
		<title>泡泡记事本 | Monkeyhbd</title>
		<meta name="viewport" content="width=device-width initial-scale=1">
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="./style.css">
		<script src="script.js"></script>
		<style>
			#note-demo {
				display: none;
			}

			#note-input-container {
				display: inline-block;
				margin: 0;
				border-radius: 3px;
			}

			#function-container {
				display: inline-block;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="main-page">
			<div id="notepad">
				<div id="menu">
					<div id="note-input-container">
						<textarea id="note-input" placeholder="在这里输入"></textarea>
					</div>
					<div id="function-container">
						<button onclick="add_note()">添加</button>
						<button onclick="remove_all_note()">清空</button>
						<button onclick="reverse_all_note()">逆序</button>
						<button onclick="light(this)">关灯</button>
					</div>
				</div>
				<div id="content-container">
					<div id="content">
						<!-- Note Demo. DON'T REMOVE THIS NODE -->
						<div id="note-demo" class="note"
						     ondblclick="remove_element(this)"
							 onmouseenter="highlight(this)"
							 onmouseleave="lowlight(this)">
							<div class="number-container">
								<p class="number">0</p>
							</div>
							<div class="literal-container">
								<p class="literal">Monkeyhbd</p>
							</div>
						</div>
						<div class="note" ondblclick="remove_element(this)" onmouseenter="highlight(this)" onmouseleave="lowlight(this)">
							<div class="number-container">
								<p class="number">1</p>
							</div>
							<div class="literal-container">
								<p class="literal">This is a Bubble Notepad.</p>
							</div>
						</div>
						<div class="note" ondblclick="remove_element(this)" onmouseenter="highlight(this)" onmouseleave="lowlight(this)">
							<div class="number-container">
								<p class="number">2</p>
							</div>
							<div class="literal-container">
								<p class="literal">Double me to delete.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
